<template>
  <div class="table-box">
    <ProTable ref="proTable" title="用户列表" row-key="id" :indent="20" :columns="columns" :request-api="getTableList">
      <!-- 表格 header 按钮 -->
      <template #tableHeader>
        <el-button type="primary" :icon="CirclePlus" :disabled="!BUTTONS['system:user:add']">新增用户 </el-button>
      </template>
      <!-- 菜单操作 -->
      <template #operation="{ row }">
        <el-button type="primary" link :icon="EditPen" :disabled="!BUTTONS['system:user:edit'] || row.id === 1"> 编辑 </el-button>
        <el-button type="primary" link :icon="Delete" :disabled="!BUTTONS['system:user:delete'] || row.id === 1">
          删除
        </el-button>
      </template>
    </ProTable>
  </div>
</template>

<script setup lang="tsx" name="accountManage">
import { useAuthButtons } from "@/hooks/useAuthButtons";
import { ref } from "vue";
import { ColumnProps } from "@/components/ProTable/interface";
import { Delete, EditPen, CirclePlus } from "@element-plus/icons-vue";
import ProTable from "@/components/ProTable/index.vue";
import { changeUserStatus, getUserList } from "@/api/modules/user";

// 权限按钮
const { BUTTONS } = useAuthButtons();

const proTable = ref();

// 表格配置项
const columns: ColumnProps[] = [
  { prop: "userId", label: "用户ID", width: 80 },
  { prop: "userName", label: "账号名称", search: { el: "input" }, width: 160 },
  { prop: "nickName", label: "用户昵称", search: { el: "input" }, width: 160 },
  {
    prop: "roles",
    label: "角色",
    minWidth: 160,
    render: scope => {
      return scope.row.roles.map((item: any) => item.roleName).join(" ");
    }
  },
  { prop: "companyId", label: "公司ID", width: 100 },
  { prop: "isCompanyAdmin", label: "是否公司管理员", width: 140 },
  { prop: "phonenumber", label: "手机账号", search: { el: "input" }, width: 140 },
  { prop: "email", label: "邮箱", width: 160 },
  {
    prop: "status",
    label: "状态",
    width: 140,
    render: scope => {
      return (
        <>
          {BUTTONS.value["system:user:status"] ? (
            <el-switch
              model-value={scope.row.status}
              active-text={scope.row.status === 0 ? "启用" : "禁用"}
              active-value={0}
              inactive-value={1}
              onClick={() => changeStatus(scope.row)}
            />
          ) : (
            <el-tag type={scope.row.status === 0 ? "success" : "danger"}>{scope.row.status ? "启用" : "禁用"}</el-tag>
          )}
        </>
      );
    }
  },
  { prop: "createBy", label: "创建人", width: 100 },
  {
    prop: "createTime",
    label: "创建时间",
    width: 250,
    search: {
      el: "date-picker",
      span: 1,
      props: { type: "datetimerange", valueFormat: "YYYY-MM-DD HH:mm:ss" }
    }
  },
  { prop: "operation", label: "操作", width: 150, fixed: "right" }
];

const getTableList = (params: any) => {
  let newParams = JSON.parse(JSON.stringify(params));
  return getUserList(newParams);
};

// 切换用户状态
const changeStatus = async (row: any) => {
  await changeUserStatus({ userId: row.userId, status: row.status === 1 ? 0 : 1 });
  proTable.value?.getTableList();
};
</script>
